<template>
  <view class="container">
    <!-- 顶部标签页 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{tab}}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
      @refresherrefresh="refresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <!-- 通知公告列表 -->
      <view class="notice-list" v-if="currentTab === 0">
        <view class="notice-item" v-for="(notice, index) in notices" :key="index" @click="viewNotice(notice)">
          <view class="notice-type" :class="notice.type">{{notice.typeText}}</view>
          <view class="notice-content">
            <text class="title">{{notice.title}}</text>
            <text class="summary">{{notice.summary}}</text>
            <view class="meta">
              <text class="time">{{notice.time}}</text>
              <text class="department">{{notice.department}}</text>
              <view class="stats">
                <text>阅读 {{notice.reads}}</text>
                <text>评论 {{notice.comments}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 校园新闻列表 -->
      <view class="news-list" v-if="currentTab === 1">
        <view class="news-item" v-for="(news, index) in newsList" :key="index" @click="viewNews(news)">
          <image class="cover" :src="news.cover" mode="aspectFill"></image>
          <view class="news-content">
            <text class="title">{{news.title}}</text>
            <text class="summary">{{news.summary}}</text>
            <view class="meta">
              <text class="source">{{news.source}}</text>
              <text class="time">{{news.time}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 活动日历列表 -->
      <view class="activity-list" v-if="currentTab === 2">
        <view class="activity-item" v-for="(activity, index) in activities" :key="index" @click="viewActivity(activity)">
          <view class="activity-content">
            <text class="title">{{activity.title}}</text>
            <image class="poster" :src="activity.poster" mode="aspectFill"></image>
            <view class="info">
              <view class="time">
                <uni-icons type="calendar" size="16"></uni-icons>
                <text>{{activity.time}}</text>
              </view>
              <view class="location">
                <uni-icons type="location" size="16"></uni-icons>
                <text>{{activity.location}}</text>
              </view>
            </view>
            <view class="status-bar">
              <text class="status" :class="activity.status">{{activity.statusText}}</text>
              <text class="participants">{{activity.participants}}人参与</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 订阅管理按钮 -->
    <view class="floating-btn" @click="showSubscription">
      <uni-icons type="notification" size="24" color="#FFFFFF"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['通知公告', '校园新闻', '活动日历'],
      currentTab: 0,
      isRefreshing: false,
      notices: [
        {
          type: 'important',
          typeText: '重要',
          title: '关于2024年清明节放假安排的通知',
          summary: '根据国务院办公厅通知，结合我校实际情况，现将2024年清明节放假安排通知如下...',
          time: '2024-03-17 10:00',
          department: '校长办公室',
          reads: 1250,
          comments: 28
        },
        {
          type: 'normal',
          typeText: '普通',
          title: '图书馆关于举办读书月活动的通知',
          summary: '为培养学生的阅读兴趣，提升校园文化氛围，图书馆定于4月举办读书月活动...',
          time: '2024-03-16 14:30',
          department: '图书馆',
          reads: 856,
          comments: 15
        }
      ],
      newsList: [
        {
          cover: '/static/news/news1.jpg',
          title: '我校在全国大学生创新创业大赛中获得特等奖',
          summary: '在日前举行的2024年全国大学生创新创业大赛总决赛中，我校代表队凭借...',
          source: '校园新闻网',
          time: '2024-03-17 09:15'
        },
        {
          cover: '/static/news/news2.jpg',
          title: '校园智慧化建设项目正式启动',
          summary: '为推进智慧校园建设，提升教育教学质量，我校智慧化建设项目于今日正式启动...',
          source: '信息化处',
          time: '2024-03-16 16:20'
        }
      ],
      activities: [
        {
          title: '2024春季校园招聘会',
          poster: '/static/activities/job-fair.jpg',
          time: '2024-03-25 09:00-17:00',
          location: '综合体育馆',
          status: 'upcoming',
          statusText: '即将开始',
          participants: 1280
        },
        {
          title: '校园文化艺术节',
          poster: '/static/activities/art-festival.jpg',
          time: '2024-04-01 - 2024-04-07',
          location: '校园各处',
          status: 'registering',
          statusText: '报名中',
          participants: 526
        }
      ]
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    loadMore() {
      // TODO: 加载更多数据
      uni.showLoading({
        title: '加载中...'
      })
      setTimeout(() => {
        uni.hideLoading()
      }, 1000)
    },
    refresh() {
      this.isRefreshing = true
      // TODO: 刷新数据
      setTimeout(() => {
        this.isRefreshing = false
      }, 1000)
    },
    viewNotice(notice) {
      uni.navigateTo({
        url: `/pages/campus/info/notice-detail?id=${notice.id}`
      })
    },
    viewNews(news) {
      uni.navigateTo({
        url: `/pages/campus/info/news-detail?id=${news.id}`
      })
    },
    viewActivity(activity) {
      uni.navigateTo({
        url: `/pages/campus/info/activity-detail?id=${activity.id}`
      })
    },
    showSubscription() {
      uni.navigateTo({
        url: '/pages/campus/info/subscription'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .tabs {
    display: flex;
    background: #FFFFFF;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #F5F5F5;
    
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      position: relative;
      
      text {
        font-size: 28rpx;
        color: #666;
      }
      
      &.active {
        text {
          color: #1890ff;
          font-weight: bold;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: #1890ff;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .content-scroll {
    flex: 1;
    background: #F5F5F5;
  }
  
  .notice-list {
    padding: 20rpx;
    
    .notice-item {
      display: flex;
      background: #FFFFFF;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;
      
      .notice-type {
        padding: 4rpx 12rpx;
        border-radius: 6rpx;
        font-size: 24rpx;
        margin-right: 20rpx;
        height: fit-content;
        
        &.important {
          background: #fff2f0;
          color: #ff4d4f;
        }
        
        &.normal {
          background: #f0f5ff;
          color: #1890ff;
        }
      }
      
      .notice-content {
        flex: 1;
        
        .title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .summary {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .meta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #999;
          
          .stats {
            display: flex;
            gap: 20rpx;
          }
        }
      }
    }
  }
  
  .news-list {
    padding: 20rpx;
    
    .news-item {
      background: #FFFFFF;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .cover {
        width: 100%;
        height: 300rpx;
      }
      
      .news-content {
        padding: 20rpx;
        
        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .summary {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .meta {
          display: flex;
          justify-content: space-between;
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
  
  .activity-list {
    padding: 20rpx;
    
    .activity-item {
      background: #FFFFFF;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .activity-content {
        padding: 20rpx;
        
        .title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .poster {
          width: 100%;
          height: 300rpx;
          border-radius: 8rpx;
          margin-bottom: 20rpx;
        }
        
        .info {
          display: flex;
          gap: 30rpx;
          margin-bottom: 20rpx;
          
          view {
            display: flex;
            align-items: center;
            gap: 10rpx;
            font-size: 26rpx;
            color: #666;
          }
        }
        
        .status-bar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .status {
            padding: 4rpx 12rpx;
            border-radius: 6rpx;
            font-size: 24rpx;
            
            &.upcoming {
              background: #f6ffed;
              color: #52c41a;
            }
            
            &.registering {
              background: #e6f7ff;
              color: #1890ff;
            }
          }
          
          .participants {
            font-size: 24rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  .floating-btn {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 100rpx;
    height: 100rpx;
    background: #1890ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(24,144,255,0.2);
  }
}
</style> 